<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>Hireo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/colors/blue.css">

</head>
<body>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header Container
    ================================================== -->
    <header id="header-container" class="fullwidth dashboard-header not-sticky">

        <!-- Header -->
        <div id="header">
            <div class="container">

                <!-- Left Side Content -->
                <div class="left-side">

                    <!-- Logo -->
                    <div id="logo">
                        <a href="/index"><img src="/images/logo.png" alt=""></a>
                    </div>

                </div>
                <!-- Left Side Content / End -->


                <!-- Right Side Content / End -->

                <!-- 雇员登录信息 -->
                <div class="right-side" th:if="${session.employee != null}">
                    <!-- User Menu -->
                    <div class="header-widget">

                        <!-- Messages -->
                        <div class="header-notifications user-menu">
                            <div class="header-notifications-trigger">
                                <a href="#"><div class="user-avatar status-online"><img th:src="${session.employee.headImg}" alt=""></div></a>
                            </div>

                            <!-- Dropdown -->
                            <div class="header-notifications-dropdown">

                                <!-- User Status -->
                                <div class="user-status">

                                    <!-- User Name / Avatar -->
                                    <div class="user-details">
                                        <div class="user-avatar status-online"><img th:src="${session.employee.headImg}" alt=""></div>
                                        <div class="user-name">
                                            [[${session.employee.username}]] <span>自由职业者</span>
                                        </div>
                                    </div>

                                </div>

                                <ul class="user-menu-small-nav">
                                    <li><a href="/employee/dashboard"><i class="icon-material-outline-dashboard"></i>个人中心</a></li>
                                    <li><a href="/employee/logout"><i class="icon-material-outline-power-settings-new"></i> 退出登录</a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                    <!-- User Menu / End -->

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
					<button class="hamburger hamburger--collapse" type="button">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
					</button>
				</span>

                </div>

                <!-- 雇主登录信息 -->
                <div class="right-side" th:if="${session.employer != null}">

                    <!-- User Menu -->
                    <div class="header-widget">

                        <!-- Messages -->
                        <div class="header-notifications user-menu">
                            <div class="header-notifications-trigger">
                                <a href="#"><div class="user-avatar status-online"><img th:src="${session.employer.headImg}" alt=""></div></a>
                            </div>

                            <!-- Dropdown -->
                            <div class="header-notifications-dropdown">

                                <!-- User Status -->
                                <div class="user-status">

                                    <!-- User Name / Avatar -->
                                    <div class="user-details">
                                        <div class="user-avatar status-online"><img th:src="${session.employer.headImg}" alt=""></div>
                                        <div class="user-name">
                                            [[${session.employer.username}]] <span>雇主</span>
                                        </div>
                                    </div>

                                </div>

                                <ul class="user-menu-small-nav">
                                    <li><a href="/employer/dashboard"><i class="icon-material-outline-dashboard"></i>个人中心</a></li>
                                    <li><a href="/employer/logout"><i class="icon-material-outline-power-settings-new"></i> 退出登录</a></li>
                                </ul>

                            </div>
                        </div>

                    </div>
                    <!-- User Menu / End -->

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
					<button class="hamburger hamburger--collapse" type="button">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
					</button>
				</span>

                </div>

                <!-- 未登录 -->
                <div class="right-side" th:if="${session.employee == null && session.employer == null}">

                    <div class="header-widget">
                        <a href="/login" class="log-in-button" style="margin-top: -24px;"><i class="icon-feather-log-in"></i> <span>登录</span></a>
                        <a href="/register" class="log-in-button"><i class="icon-feather-log-in"></i> <span>注册</span></a>
                    </div>

                    <!-- Mobile Navigation Button -->
                    <span class="mmenu-trigger">
                        <button class="hamburger hamburger--collapse" type="button">
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>
				    </span>

                </div>

                <!-- Right Side Content / End -->

            </div>
        </div>
        <!-- Header / End -->

    </header>
    <div class="clearfix"></div>
    <!-- Header Container / End -->



    <!-- Titlebar
    ================================================== -->
    <div class="single-page-header" data-background-image="/images/single-task.jpg">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="single-page-header-inner">
                        <div class="header-image"><img th:src="${task.employer.headImg}" alt=""></a></div>
                        <div class="left-side">
                            <div class="header-details">
                                <h3>[[${task.taskTitle}]]</h3>
                                <h5>[[${task.taskProfile}]]</h5>
                                <ul>
                                    <li><i class="icon-material-outline-business"></i>[[${task.employer.username}]]</li>
                                </ul>
                            </div>
                        </div>
                        <div class="right-side">
                            <div class="salary-box">
                                <div class="salary-type">项目预算</div>
                                <div class="salary-amount">￥[[${task.feesLow}]] - ￥[[${task.feesHigh}]]</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Page Content
    ================================================== -->
    <div class="container">
        <div class="row">

            <!-- Content -->
            <div class="col-xl-8 col-lg-8 content-right-offset">

                <!-- Description -->
                <div class="single-page-section">
                    <h3 class="margin-bottom-25">任务描述</h3>
                    <p>[[${task.taskDesc}]]</p>
                </div>

                <div class="single-page-section" th:if="${task.feesFile != null}">
                    <h3>附件</h3>
                    <div class="attachments-container">
                        <a target="_blank" th:href="${task.feesFile}" class="attachment-box ripple-effect"><span>[[${task.filename}]]</span></a>
                    </div>
                </div>

                <!-- Skills -->
                <div class="single-page-section">
                    <h3>任务所需技能</h3>
                    <div class="task-tags">
                        <span th:each="skill : ${task.skills}" style="margin-left: 5px;">[[${skill.skillName}]]</span>
                    </div>
                </div>
                <div class="clearfix"></div>

                <!-- Freelancers Bidding -->
                <div class="boxed-list margin-bottom-60">
                    <div class="boxed-list-headline">
                        <h3><i class="icon-material-outline-group"></i>所有竞标者</h3>
                    </div>
                    <ul class="boxed-list-ul">
                        <li th:if="${task.bidVos.size() == 0}">
                            暂无任何竞标者！
                        </li>
                        <li th:each="bid : ${task.bidVos}">
                            <div class="bid">
                                <!-- Avatar -->
                                <div class="bids-avatar">
                                    <div class="freelancer-avatar">
                                        <div class="verified-badge" th:if="${bid.bidStatus == 1}"></div>
                                        <a th:href="@{'/employee/profile?employeeId=' + ${bid.employee.id}}"><img th:src="${bid.employee.headImg}" alt=""></a>
                                    </div>
                                </div>

                                <!-- Content -->
                                <div class="bids-content">
                                    <!-- Name -->
                                    <div class="freelancer-name">
                                        <h4><a th:href="@{'/employee/profile?employeeId=' + ${bid.employee.id}}">[[${bid.employee.username}]]</a></h4>
                                    </div>
                                </div>

                                <!-- Bid -->
                                <div class="bids-bid">
                                    <div class="bid-rate">
                                        <div class="rate">￥[[${bid.bidPrice}]]</div>
                                        <span>[[${bid.deliveryDesc}]]完成 </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>


            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-4">
                <div class="sidebar-container">

                    <div class="sidebar-widget">
                        <div class="bidding-widget" th:if="${task.taskStatus == 1 || task.taskStatus == 2}">
                            <div class="bidding-headline"><h3>该任务已经中标!</h3></div>
                        </div>
                        <div class="bidding-widget" th:if="${task.taskStatus == 3}">
                            <div class="bidding-headline"><h3>该任务已经完成!</h3></div>
                        </div>
                        <div class="bidding-widget" th:if="${task.taskStatus == 0}">
                            <div class="bidding-headline"><h3>投标这个任务!</h3></div>
                            <div class="bidding-inner">
                                <form action="/employee/bid" method="post">
                                    <input name="taskId" th:hidden="true" th:value="${task.id}" />
                                    <!-- Headline -->
                                    <span class="bidding-detail">设定您的<strong>预期价格</strong></span>

                                    <!-- Price Slider -->
                                    <div class="bidding-value">￥<span id="biddingVal"></span></div>
                                    <input name="bidPrice" class="bidding-slider" type="text" value="" data-slider-handle="custom" data-slider-currency="$" th:attr="data-slider-min=${task.feesLow}, data-slider-max=${task.feesHigh}"  data-slider-value="auto" data-slider-step="10" data-slider-tooltip="hide" />

                                    <!-- Headline -->
                                    <span class="bidding-detail margin-top-30">设置您的 <strong>交货时间</strong></span>

                                    <!-- Fields -->
                                    <div class="bidding-fields">
                                        <div class="bidding-field">
                                            <!-- Quantity Buttons -->
                                            <div class="qtyButtons">
                                                <div class="qtyDec"></div>
                                                <input name="timeNumber" type="text" value="1">
                                                <div class="qtyInc"></div>
                                            </div>
                                        </div>
                                        <div class="bidding-field">
                                            <select name="timeType" class="selectpicker default">
                                                <option value="小时" selected>小时</option>
                                                <option value="天">天</option>
                                                <option value="月">月</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Button -->
                                    <button id="snackbar-place-bid" class="button ripple-effect move-on-hover full-width margin-top-30" type="submit"><span>投标</span></button>
                                </form>
                            </div>
                            <div class="bidding-signup" th:if="${session.employee == null}">还没有账号? <a href="/register" class="register-tab sign-in popup-with-zoom-anim">去注册</a></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- Spacer -->
    <div class="margin-top-15"></div>
    <!-- Spacer / End-->

    <!-- Footer
    ================================================== -->
    <div id="footer">
        <!-- Footer Copyrights -->
        <div class="footer-bottom-section">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        © 2018 <strong>yuu</strong>. All Rights Reserved.
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Copyrights / End -->

    </div>
    <!-- Footer / End -->

</div>
<!-- Wrapper / End -->


<!-- Scripts
================================================== -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery-migrate-3.0.0.min.js"></script>
<script src="/js/mmenu.min.js"></script>
<script src="/js/tippy.all.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/bootstrap-slider.min.js"></script>
<script src="/js/bootstrap-select.min.js"></script>
<script src="/js/snackbar.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/counterup.min.js"></script>
<script src="/js/magnific-popup.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/plugins/layer/layer.js"></script>


<!-- 自定义 Script -->
<script>
    // 获取投标失败的消息
    $(function () {
        var msg = "[[${msg}]]"
        console.log(msg)
        if (msg != "") {
            layer.msg(msg)
        }
    })
</script>

</body>
</html>
